<template>
  <div class="box">
    <p>子组件的渲染区域</p>
    <span>{{ num }}</span>
    <!-- <p>{{ $attrs.msg }}</p> -->
    <!-- <p>{{ msg }}</p> -->
    <!-- <h1>{{ mon }}</h1>
    <p>{{ isB }}</p> -->
    <p>{{ list }}</p>
    <p>{{ person.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  // Vue推荐使用 props 接收父组件传输的数据
  // props: ['msg', 'mon'],
  // 方式2：关于数据的描述
  // props: {
  //   isB: Boolean,
  //   msg: {
  //     // 父组件必须要穿数据，不然报错
  //     required: true,
  //     // 严格限制了传输过来的数据类型
  //     type: String
  //   },
  //   mon: {
  //     type: Number,
  //     // 设置默认值的情况
  //     default: 101
  //   }
  // },
  props: {
    // msg: {
    //   type: String,
    //   default: 'hahaha',
    //   required: false
    // },
    list: {
      type: Array,
      // 只要你能记得之前组件中data为什么是函数return对象就能一起套用
      // default: function () {
      //   return [1, 1, 2]
      // }
      default: () => []
    },
    person: {
      type: Object,
      // 组件是会被复用的，如果将来大量使用，这里直接是对象，那么导致所有组件共享一个对象数据
      // default: function() {
      //   return {}
      // }
      default: () => {}
    }
    // 不要跟data,methods,计算属性等数据或者函数重名
    // num: {
    //   type: Number,
    //   default: 120
    // }
  },
  data() {
    return {
      num: 100
    }
  },
  mounted() {
    // 能访问到父组件传输过来的数据
    // 如果使用props接收了，就获取不到
    console.log('子组件', this.$attrs.mon)
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  margin: 20px 0;
  background-color: #ccc;
}
</style>
